import React, { useState, CSSProperties, useRef, useEffect } from "react";
import jaasdsa from "@/assets/images/jaasdsa.png";
import { BarsOutlined } from "@ant-design/icons";
import { Transition } from "react-transition-group";
import classNames  from 'classnames';

import "./index.less";

const duration = 1000;

const defaultStyle = {
  opacity: 0,
  // display:"none",
  transition: `opacity ${duration}ms`,
};

interface ITransitionStyles{
  entering: CSSProperties,
  entered: CSSProperties,
  exiting: CSSProperties,
  exited: CSSProperties,
}

const transitionStyles:ITransitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

interface IProps{
  currentCategory:string,
  setCurrentCategory:(category:string)=>any
}

function HomeHeader(props:IProps) {
  let [isMenuVisible, setIsMenuVisible] = useState(false);
  let [isMenuHidden, setIsMenuHidden] = useState(true);
  const setCategory=function(e:React.MouseEvent<HTMLUListElement, MouseEvent>){
    let target:HTMLUListElement=e.target as HTMLUListElement;
    let category=target.dataset.category as string;
    props.setCurrentCategory(category);
    setIsMenuVisible(false);
  }
  return (
    <header className="home-header">
      <div className="logo-header">
      <img src={jaasdsa}></img>
        <BarsOutlined
          onClick={() => {
            setIsMenuVisible(!isMenuVisible);
          }}
        />
      </div>

      <Transition in={isMenuVisible} timeout={duration}
       onExited={(node:any)=>{  
        setIsMenuHidden(true);
      }}
      onEnter={(node: any, isAppearing: any)=>{  
        setIsMenuHidden(false);
    }}>
        {(state:keyof typeof transitionStyles) => (
          <ul 
          className={classNames("category",{"hidden":isMenuHidden})}
          onClick={setCategory}
          style={{
            ...defaultStyle,
            ...transitionStyles[state]
            }}>
            <li data-category="全部" className={classNames({"active":props.currentCategory==="全部"})}>全部品种</li>
            <li data-category="哈士奇" className={classNames({"active":props.currentCategory==="哈士奇"})}>精品哈士奇</li>
            <li data-category="田园犬" className={classNames({"active":props.currentCategory==="田园犬"})}>中华田园犬</li>
          </ul>
        )}
      </Transition>
    </header>
  );
}

export default HomeHeader;
